<template>
	<view class="my_order">
		<view class="tab_list">
			<view :class="currentIndex=='0'?'active_tab':''" class="tab-item" @click="changeTab(0)">
				待支付
			</view>
			<view :class="currentIndex=='1'?'active_tab':''" class="tab-item" @click="changeTab(1)">
				待发货
			</view>
		</view>
		<view class="order_list"  v-if="currentIndex==0">
			<view class="order_item" v-for="(item,index) in obligationList" :key='index'>
				<view class="order_id">
					订单号：{{item.order_id}}	
				</view>		
				<view class="goods_list">
					<view class="goods_item" v-for="(it,ix) in item.list" :key='ix'>
						{{it}}
					</view>
				</view>
				<view class="goods_text">
					<view class="text-left">
						<view>下单时间</view>
						<view>支付时间</view>
					</view>
					<view class="text-right">
						<view class="ordet_price">
							￥{{item.goods_price}}
						</view>
						<view class="order_num">
							*{{item.goods_num}}
						</view>
					</view>
				</view>
				<view class="btn">
					<view class="go-pay" @click="goPay(item)">
						去支付
					</view>
					<view class="go-pay f-color" @click="deleteOrder(item.id)">
						删除
					</view>
				</view>
			</view>
		</view>
		<!-- 待发货 -->
		<view class="order_list" v-if="currentIndex==1">
			<view class="order_item" v-for="(item,index) in shippedList" :key='index'>
				<view class="order_id">
					订单号：{{item.order_id}}	
				</view>		
				<view class="goods_list">
					<view class="goods_item" v-for="(it,ix) in item.list" :key='ix'>
						{{it}}
					</view>
				</view>
				<view class="goods_text">
					<view class="text-left">
						<view>订单创建时间: {{item.placeTime}}</view>
						<view>订单支付时间: {{item.payTime}}</view>
					</view>
					<view class="text-right">
						<view class="ordet_price">
							￥{{item.goods_price}}
						</view>
						<view class="order_num">
							*{{item.goods_num}}
						</view>
					</view>
				</view>
				<view class="btn">
					<view class="go-pay" @click="deleteOrder(item.id)">
						删除订单
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import $http from '@/common/api/request.js'
	export default {
		data() {
			return {
				// 当前tab索引
				currentIndex:0,
				// 待付款的数据
				obligationList:[],
				// 待发货的数据
				shippedList:[],
			}
		},
		onReady(){
			this.selectObligation(),
			this.selectShipped()
		},
		methods:{
			// 删除订单方法
			deleteOrder(id){
				$http.request({
					url:`/deleteOrderById?id=${id}`,
					header:{
						'content-type': 'application/x-www-form-urlencoded',
						token:true
					},
				}).then(res=>{
					if(res.success){
						this.selectObligation()
						this.selectShipped()
						uni.showToast({
							title: '删除成功',
							icon: 'success'
						})
					}else{
						uni.showToast({
							title: '网络错误',
							icon: 'none'
						})
					}
				}).catch(err=>{
					console.log(err.message)
				})
			},
			// 切换tab的方法
			changeTab(index){
				this.currentIndex=index
			},
			// 获取待付款的数据
			selectObligation(){
				$http.request({
					url:'/selectOrderByStatus1',
					method:'post',
					header:{
						'content-type': 'application/x-www-form-urlencoded',
						token:true
					},
				}).then((res)=>{
					res.data.forEach(item=>{
						let list=item.goods_name.split(',')
						item.list=list
					})
					this.obligationList=res.data
				}).catch(()=>{
					uni.showToast({
						title: '请求失败',
						icon: 'none'
					})
				})
			},
			// 获取待发货的数据
			selectShipped(){
				$http.request({
					url:'/selectOrderByStatus2',
					method:'post',
					header:{
						'content-type': 'application/x-www-form-urlencoded',
						token:true
					},
				}).then((res)=>{
					res.data.forEach(item=>{
						let list=item.goods_name.split(',')
						item.list=list
					})
					this.shippedList=res.data
				}).catch(()=>{
					uni.showToast({
						title: '请求失败',
						icon: 'none'
					})
				})
			},
			// 去支付
			goPay(item){
				if(item.address){
					uni.navigateTo({
						url:'../payment/payment?details='+JSON.stringify({
							totalPrice:item.goods_price,
							orderNumber:item.order_id
						})
					})
				}else{
					uni.navigateTo({
						// url:`../comfirm-order/comfirm-order?detail=${JSON.stringify(this.selectedList)}`
						url:'../payment/payment?details='+JSON.stringify({
							totalPrice:item.goods_price,
							orderNumber:item.order_id
						})
					})
				}
				
			}
		}
	}
</script>

<style scoped>
	.my_order{
		font-size: 32rpx;
		background-color: #E1E1E1;
		min-height: 100vh;
		padding-bottom: 20px;
	}
	.tab_list{
		display: flex;
		font-size: 28rpx;

	}
	.tab-item{
		height: 80rpx;
		background-color: #FFFFFF;
		display: flex;
		flex: 1;
		justify-content: center;
		align-items: center;
		border-bottom: solid 8rpx #FFFFFF
	}
	.active_tab{
		border-bottom: solid 8rpx #00B7FF;
	}
	.order_item{
		margin: 6px 6px 0 6px;
		border-radius: 10px;
		padding-top: 20rpx;
		background-color: #FFFFFF;
		margin-bottom: 10rpx;
	}
	.order_id{
		font-size: 24rpx;
		padding: 0 20rpx;
		color: #6D6D72;
	}
	.goods_list{
		padding: 0 20rpx;
		background-color: #fafafa;
	}
	.goods_item{
		padding: 10rpx 0;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}
	.goods_text{
		display: flex;
		padding:10rpx 20rpx;
	}
	.text-left{
		font-size: 26rpx;
		color: #6D6D72;
		flex:3
	}
	.text-right{
		padding-right: 20rpx;
		text-align: right;
		flex:1
	}
	.btn{
		display: flex;
		padding:10rpx 20rpx;
		justify-content: flex-end;
	}
	.go-pay{
		padding: 10rpx 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>
